<!DOCTYPE html>
<html lang="zn-ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>连连看</title>
<script src="./static/js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div class="row title-row">
        <div class="col-md-12">
            <select v-model="theme">
                <option value="text">数字</option>
                <option value="fruits">水果</option>
                <option value="clothes">衣服</option>
                <option value="baby">母婴</option>
            </select>
            <span>用时：{{fun.sec2time(time)}}</span>
            <span v-show="best>0">历史最快：{{fun.sec2time(best)}}</span>
            <button class="btn btn-warning" @click="del_best" v-if="best>0">清空历史</button>
            <button class="btn btn-warning" @click="get_msg">提示</button>
            <button class="btn btn-warning" @click="re_sort">重排</button>
            <button class="btn btn-default" @click="auto">自动玩</button>
            <button class="btn btn-default" @click="stop_auto">停止自动玩</button>
            <button class="btn btn-default" @click="start">{{status==1&&time?'重新':''}}开始</button>
            <button class="btn btn-default" @click="stop" v-show="status==1">停止游戏</button>
        </div>
    </div>
    <div class="my-body">
        <div class="td" 
            :class="{'td-had':v&&theme=='text','now':i==prev||i==index,'line':fun.in_array(i,line),'cupple':fun.in_array(i,cupple)}" 
            v-for="(v,i) in list"
            @click="do_click(v,i)"
            :title="i"
            >
            <span v-if="theme=='text'">{{v}}</span>
            <img :src="'./static'+'/img/game_llk/'+theme+'/'+v+'.png'" :alt="v" v-if="v&&theme!='text'">
        </div>
    </div>
    <audio src="./static/music/llk_dj.mp3" id="music"></audio>
</div>    
</body>
</html>
<script src="./static/js/fun.js"></script>
<link rel="stylesheet" href="./llk.css">
<script>
    /* 
    todo:
    1. 适配手机

    */
//三根线之内
new Vue({
    el:"#app",
    data:{
        list:[],
        prev:-1,//前一个
        index:-1,
        min:-1,
        max:-1,
        col:20,//每一行的列数
        row:20,
        line:[],
        time:"",//时间字符
        best:"",//最好成绩
        status:0,//0 未开始，1正在进行，2结束
        timer:0,
        timer2:0,
        cupple:[],
        theme:"fruits",
        music:fun.$("#music"),
        auto_count:0,
    },
    created(){
        var best=localStorage.getItem("game_llk_best");
        if(best>0){
            this.best=best;
        }
        this.set_config();
        this.init();//用二维数组件x,y表示格子的位置会不会好一些？
    },
    methods:{
        del_best(){
            localStorage.setItem("game_llk_best",0);
            this.best=0;
        },
        set_config(){
            if(fun.is_mobile()==false) return;
            var width=window.innerWidth;
            var height=window.innerHeight;
            height=height>100?height-100:height;
            this.row=Math.floor(height/(width/6));
            this.col=6;
            console.log("row,col",this.row,this.col)
        },
        get_msg(is_auto){
            if(is_auto!==2){
                this.auto_count++;
            }
            this.cupple=[];
            var len=this.list.length;
            for(var i=0;i<len;i++){
                if(!this.list[i]) continue;
                var same=this.find_same_value(i);
                if(same.length==0) continue;
                for(var h=0,l=same.length;h<l;h++){
                    var j=same[h];
                    this.min=i<j?i:j;
                    this.max=i>j?i:j;
                    var re=this.check(this.min,this.max);
                    if(re.length>0){
                        if(is_auto!==2){
                            this.cupple=[i,j];
                        }
                        return [i,j];
                    }
                }
            }
            this.cupple=[];
            return [];
        },
        find_same_value(index){
            var re=[];
            var value=this.list[index];
            for(var i=index+1,len=this.list.length;i<len;i++){
                if(this.list[i]==value){
                    re.push(i);
                }
            }
            return re;
        },
        auto(){
            if(this.status!=1){
                this.start();
            }
            this.timer2= setInterval(()=>{
                    var c=this.get_msg();
                    this.prev=c[0];
                    this.do_click(this.list[c[1]],c[1]);
                    if(this.status==2){
                        clearInterval(this.timer2);
                    }
            },1000)
        },
        stop_auto(){
            clearInterval(this.timer2);
        },
        start(){
            this.prev=-1;
            this.index=-1;
            this.time="";
            this.status=1;
            this.cupple=[];
            this.auto_count=0;
            this.init();
            this.count_time();
            this.is_re_sort();
        },
        stop(){
            this.status=2;
        },
        re_sort(){
            this.prev=-1;
            this.index=-1;
            fun.array_rand(this.list);
        },
        count_time(){
            clearInterval(this.timer);
            this.time=0;
            this.timer=setInterval(()=>{
                if(this.status==1){
                   this.time++;
                }else{
                    clearInterval(this.timer);
                }
            },1000)
        },
        is_finish(){
            var len=this.list.length;
            for(var i=0;i<len;i++){
                if(this.list[i]) return false;
            }
            ///已经完成
            this.status=2;
            if(this.auto_count<5 && (!this.best||this.time<this.best) ){
                this.best=this.time;
                localStorage.setItem("game_llk_best",this.best);
            }
            var msg="恭喜你，已过关。用时："+fun.sec2time(this.time);
            if(confirm(msg)){
                this.start();
            }
            return true;
        },
        is_re_sort(){
            var c=this.get_msg(2);
            while(c.length==0){
                this.re_sort();
                c=this.get_msg(2);
            }
        },
        do_click(v,i){
            if(this.status!=1||!v||i==this.prev) return;
            if(this.prev==-1){
                this.prev=i;
                return;
            }
            if(this.list[this.prev]!=this.list[i]){
                this.prev=i;
                this.index=-1;
                return;
            }
            this.index=i;
            min=i>this.prev?this.prev:i;
            max=this.prev==min?i:this.prev;
            this.min=min;
            this.max=max;
            this.line=this.check(min,max);
            if(this.line.length>0){
                this.remove(min,max);
                this.prev=-1;
                this.index=-1;
            }else{
                this.prev=i;
                this.index=-1;
            } 
        },
        remove(min,max){
            this.list.splice(min,1,"");
            this.list.splice(max,1,"");
            this.music.play();
            setTimeout(()=>{
                this.line=[];
                this.cupple=[];
                if(this.is_finish()==false){
                    this.is_re_sort();
                }
            },300)//点得快的话，旧的不是不能消除吗？ 
        },
        check(min,max){
            var line=this.get_one_line(min,max);
            if(line.length>0){
                return line;
            }
            line=this.get_two_line(min,max);
            if(line.length>0){
                return line;
            }
            line=this.get_three_line(min,max);
            if(line.length>0){
                return line;
            }
            return [];
        },
        //min向四个方向平衡，寻找two_line
        get_three_line(min,max){
            var line=[min];
            var left=min%this.col;
            //向左
            for(var i=1;i<=left;i++){
                var now=min-i;
                if(this.is_empty(now)==false){
                    line=[min];
                    break;
                } 
                var two=this.get_two_line(now,max);
                if(two.length>0){
                    return line.concat(two);
                }else{
                    line.push(now);
                }
            }
            //向右
            line=[min];
            var right=this.col-left-1;
            for(var i=1;i<=right;i++){
                var now=min+i;
                if(this.is_empty(now)==false){
                    line=[min];
                    break;
                }
                var two=this.get_two_line(now,max);
                if(two.length>0){
                    return line.concat(two);
                }else{
                    line.push(now);
                }
            }
            //向上
            line=[min];
            var top=Math.floor(min/this.col);
            for(var i=1;i<=top;i++){
                var now=min-this.col*i;
                if(this.is_empty(now)==false){
                    line=[min];
                    break;
                }
                var two=this.get_two_line(now,max);
                if(two.length>0){
                    return line.concat(two);
                }else{
                    line.push(now);
                }
            }
            //向下
            line=[min];
            var down=this.row-top-1;
            for(var i=1;i<=down;i++){
                var now=min+this.col*i;
                if(this.is_empty(now)==false){
                    line=[min];
                    break;
                }
                var two=this.get_two_line(now,max);
                if(two.length>0){
                    return line.concat(two);
                }else{
                    line.push(now);
                }
            }
            return [];
        },
        get_two_line(a,b){
            var min=a<b?a:b;
            var max=a>b?a:b;
            if( Math.floor(min/this.col)==Math.floor(max/this.col) || min%this.col == max%this.col  ){
                return [];
            }
            var line=[min];
            var left=min%this.col-max%this.col;
            //无向右
            if(left<0){
                var right=-left;
                for(var i=1;i<=right;i++){
                    var now=min+i;
                    if(this.is_empty(now)==false){
                        line=[min];
                        break;
                    }
                    var one=this.get_one_line(now,max);
                    if(one.length>0){
                        return line.concat(one);
                    }else{
                        line.push(now);
                    }
                }
            }else{ //先向左
                for(var i=1;i<=left;i++){
                    var now=min-i;
                    if(this.is_empty(now)==false){
                        line=[min];
                        break;
                    }
                    var one=this.get_one_line(now,max);
                    if(one.length>0){
                        return line.concat(one);
                    }else{
                        line.push(now);
                    }
                }
            }
            //向下
            line=[min];
            var down=Math.floor(max/this.col)-Math.floor(min/this.col);
            for(var i=1;i<=down;i++){
                var now=min+this.col*i;
                if(this.is_empty(now)==false){
                    return [];
                }
                var one=this.get_one_line(now,max);
                if(one.length>0){
                    return line.concat(one);
                }else{
                    line.push(now);
                }
            }
            return [];
        },
        get_one_line(a,b){
            var min=a<b?a:b;
            var max=a>b?a:b;
            var line=[];//要删除的线路
            //判断是不是同一横线
            if( Math.floor(min/this.col)==Math.floor(max/this.col) ){
                var len=max-min;
                for(var i=0;i<=len;i++){
                    var now=min+i;
                    if(this.is_empty(now)==false) return [];
                    line.push(now);
                }
                return line;
            }
            //同一竖线
            if( min%this.col == max%this.col ){
                var len=Math.floor(max/this.col)-Math.floor(min/this.col);
                for(var i=0;i<=len;i++){
                    var now=min+this.col*i;
                    if(this.is_empty(now)==false) return [];
                    line.push(now);
                }
                return line;
            }
            return [];
        },
        is_empty(i){
            if(!this.list[i] || i==this.min || i==this.max){
                return true;
            }
            return false;
        },
        init(){
            var total=this.row*this.col;
            this.list=this.get_text(total);
        },
        get_text(total){
            var arr=[];
            var r=Math.ceil(total/40);//重复次数
            if(r%2==1){
                r=r+1;
            }
            num=r*20;
            for(var i=1;i<=total;i++){
                if(i<=num/r){
                    for(var j=0;j<r;j++){
                        arr.push(i);
                    }
                }else if(i>num){
                    arr.push("");
                }
            }
            fun.array_rand(arr);
            return arr;
        }
    }
})
</script>